<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>youku用户后台</title>
<link rel="stylesheet" href="{{ static_url('templates/resources/css/reset.css') }}" type="text/css" media="screen" />
<link rel="stylesheet" href="{{ static_url('templates/resources/css/style.css') }}" type="text/css" media="screen" />
<link rel="stylesheet" href="{{ static_url('templates/resources/css/invalid.css') }}" type="text/css" media="screen" />	
<script type="text/javascript" src="{{ static_url('templates/resources/scripts/jquery-1.3.2.min.js') }}"></script>
<script type="text/javascript" src="{{ static_url('templates/resources/scripts/simpla.jquery.configuration.js') }}"></script>
<script type="text/javascript" src="{{ static_url('templates/resources/scripts/facebox.js') }}"></script>
<script type="text/javascript" src="{{ static_url('templates/resources/scripts/jquery.wysiwyg.js') }}"></script>
<script type="text/javascript" src="{{ static_url('templates/resources/scripts/jquery.datePicker.js') }}"></script>
<script type="text/javascript" src="{{ static_url('templates/resources/scripts/jquery.date.js') }}"></script>
<script>
$(function(){
    //找到所有的td节点
    var tds=$("span");
    //给所有的td添加点击事件
    tds.click(function(){
        //获得当前点击的对象
        var td=$(this);
        //取出当前td的文本内容保存起来
        var oldText=td.text();
        var remark = td.attr('remark');
        //建立一个文本框，设置文本框的值为保存的值   
        var input=$("<input type='text' value='"+oldText+"'/>"); 
        //将当前td对象内容设置为input
        td.html(input);
        //设置文本框的点击事件失效
        input.click(function(){
            return false;
        });
        //设置文本框的样式
        input.css("border-width","1");              

        //设置文本框宽度等于td的宽度
        input.width(td.width());
        //当文本框得到焦点时触发全选事件  
        input.trigger("focus").trigger("select"); 
        //当文本框失去焦点时重新变为文本
        input.blur(function(){
            var input_blur=$(this);
            //保存当前文本框的内容
            var newText=input_blur.val(); 
            td.html(newText);
            
            if (window.confirm('确实要修改吗？'))
	 {
            
            $.post("/updateuser",{username:newText,userid:remark});
		}else{td.html(oldText);}
            
        });
 
        //响应键盘事件
        input.keyup(function(event){
            // 获取键值
            var keyEvent=event || window.event;
            var key=keyEvent.keyCode;
            //获得当前对象
            var input_blur=$(this);
            switch(key)
            {
                case 13://按下回车键，保存当前文本框的内容
                    var newText=input_blur.val(); 
                    td.html(newText); 
                    if (window.confirm('确实要修改吗？'))
	 {
            
            $.post("/updateuser",{username:newText,userid:remark});
		}else{td.html(oldText);}
                break;
                
                case 27://按下esc键，取消修改，把文本框变成文本
                    td.html(oldText); 
                break;
            }
        });
        
        
        
        
        
        
        
        
    });
});

</script>
<script>
function deluser(userid){
	
	
	if (window.confirm('确实要永久删除吗？'))
	 {
            
            $.post("/deleteuser",{userid:userid},function(result){
    if(result=='ok'){alert('删除成功');window.location.reload();}
  });
		}
	
	
}

function adduser() {

    
        var username = $("#username").val();
     

        if(username==''){

        alert('用户名不能为空');
        return false;

        }
        
         $.ajax({
		type: "POST",
		url: "/insertuser",
        data : {
    username : username,
},
        dataType: "html", 
		success: function(msg){
        
	if(msg=='ok'){
              alert('添加用户成功')
              window.location.reload();
       
        }else{
         alert('添加失败,请换一个用户名');
        }
         
								}
				});
        
        
        }
</script>
</head>
	<body><div id="body-wrapper"> <!-- Wrapper for the radial gradient background -->
		
		<div id="sidebar"><div id="sidebar-wrapper"> <!-- Sidebar with logo and menu -->
			
			<h1 id="sidebar-title"><a href="#">Simpla Admin</a></h1>
		  
			<!-- Logo (221px wide) -->
			<a href="#"><img id="logo" src="{{ static_url('templates/resources/images/logo.png') }}" alt="Simpla Admin logo" /></a>
		  
			<!-- Sidebar Profile links -->
			<div id="profile-links">
				Hello, <a href="#" title="Edit your profile">admin</a><br />
				<br />
				<a href="/logout" title="Sign Out">登出</a>
			</div>        
			
			<ul id="main-nav">  <!-- Accordion Menu -->
			
			{% include nav.html %}

                               
				
				
				
				
			</ul> <!-- End #main-nav -->
			
			<div id="messages" style="display: none"> <!-- Messages are shown when a link with these attributes are clicked: href="#messages" rel="modal"  -->
				
				<h3>3 Messages</h3>
			 
				<p>
					<strong>17th May 2009</strong> by Admin<br />
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue.
					<small><a href="#" class="remove-link" title="Remove message">Remove</a></small>
				</p>
			 
				<p>
					<strong>2nd May 2009</strong> by Jane Doe<br />
					Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
					<small><a href="#" class="remove-link" title="Remove message">Remove</a></small>
				</p>
			 
				<p>
					<strong>25th April 2009</strong> by Admin<br />
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue.
					<small><a href="#" class="remove-link" title="Remove message">Remove</a></small>
				</p>
				
				<form action="#" method="post">
					
					<h4>New Message</h4>
					
					<fieldset>
						<textarea class="textarea" name="textfield" cols="79" rows="5"></textarea>
					</fieldset>
					
					<fieldset>
					
						<select name="dropdown" class="small-input">
							<option value="option1">Send to...</option>
							<option value="option2">Everyone</option>
							<option value="option3">Admin</option>
							<option value="option4">Jane Doe</option>
						</select>
						
						<input class="button" type="submit" value="Send" />
						
					</fieldset>
					
				</form>
				
			</div> <!-- End #messages -->
			
		</div></div> <!-- End #sidebar -->
		
		<div id="main-content"> <!-- Main Content Section with everything -->
			
			<noscript> <!-- Show a notification if the user has disabled javascript -->
				<div class="notification error png_bg">
					<div>
						Javascript is disabled or is not supported by your browser. Please <a href="http://browsehappy.com/" title="Upgrade to a better browser">upgrade</a> your browser or <a href="http://www.google.com/support/bin/answer.py?answer=23852" title="Enable Javascript in your browser">enable</a> Javascript to navigate the interface properly.
					</div>
				</div>
			</noscript>
			
			<!-- Page Head -->
			用户名:<input name="username" type="text" id="username" />&nbsp;<input type="button"  value="点击添加" onclick="adduser()" />
			<br />
			<div class="clear"></div> <!-- End .clear -->
			
			<div class="content-box"><!-- Start Content Box -->
				
				<div class="content-box-header">
					
					<h3>内容列表</h3>
					
					
					<!--<ul class="content-box-tabs">
						<li><a href="#tab1" class="default-tab">Table</a></li> <!-- href must be unique and match the id of target div 
						<li><a href="#tab2">Forms</a></li>
					</ul>-->
					
					<div class="clear"></div>
					
				</div> <!-- End .content-box-header -->
				
				<div class="content-box-content">
					
					<div class="tab-content default-tab" id="tab1"> <!-- This is the target div. id must match the href of this div's tab -->
						
						<!--<div class="notification attention png_bg">
							<a href="#" class="close"><img src="{{ static_url('templates/resources/images/icons/cross_grey_small.png') }}" title="Close this notification" alt="close" /></a>
							<div>
								This is a Content Box. You can put whatever you want in it. By the way, you can close this notification with the top-right cross.
							</div>
						</div>-->
						
						<table>
							
							<thead>
								<tr>
								   <th><input class="check-all" type="checkbox" /></th>
								   <th>用户名</th>
								   <th>操作</th>
								</tr>
								
							</thead>
						 
							<tfoot>
								<tr>
									<td colspan="6">
									
										
										<div class="pagination">
											<a href="/ulist?page={{page['first']}}">首页</a>
<a href="/ulist?page={{page['previous']}}">上一页</a>
<a href="/ulist?page={{page['next']}}">下一页</a>
<a href="/ulist?page={{page['last']}}">尾页</a>
										</div> <!-- End .pagination -->
										<div class="clear"></div>
									</td>
								</tr>
							</tfoot>
						 
							<tbody>
								
								
								{% for item in entries %}
								<tr>
									<td><input type="checkbox" /></td>
									<td><span remark="{{ item['id'] }}" >{{ item['username'] }}</span></td>
									
									<td>
										<!-- Icons -->
										<input value="删除" type="button" onclick="deluser({{ item['id'] }});" />
									</td>
								</tr>
								{% end %}
								
								
								
	
				
					
							</tbody>
							
						</table>
						
					</div> <!-- End #tab1 -->
					
					<div class="tab-content" id="tab2">
					
						<form action="#" method="post">
							
							<fieldset> <!-- Set class to "column-left" or "column-right" on fieldsets to divide the form into columns -->
								
								<p>
									<label>Small form input</label>
										<input class="text-input small-input" type="text" id="small-input" name="small-input" /> <span class="input-notification success png_bg">Successful message</span> <!-- Classes for input-notification: success, error, information, attention -->
										<br /><small>A small description of the field</small>
								</p>
								
								<p>
									<label>Medium form input</label>
									<input class="text-input medium-input datepicker" type="text" id="medium-input" name="medium-input" /> <span class="input-notification error png_bg">Error message</span>
								</p>
								
								<p>
									<label>Large form input</label>
									<input class="text-input large-input" type="text" id="large-input" name="large-input" />
								</p>
								
								<p>
									<label>Checkboxes</label>
									<input type="checkbox" name="checkbox1" /> This is a checkbox <input type="checkbox" name="checkbox2" /> And this is another checkbox
								</p>
								
								<p>
									<label>Radio buttons</label>
									<input type="radio" name="radio1" /> This is a radio button<br />
									<input type="radio" name="radio2" /> This is another radio button
								</p>
								
								<p>
									<label>This is a drop down list</label>              
									<select name="dropdown" class="small-input">
										<option value="option1">Option 1</option>
										<option value="option2">Option 2</option>
										<option value="option3">Option 3</option>
										<option value="option4">Option 4</option>
									</select> 
								</p>
								
								<p>
									<label>Textarea with WYSIWYG</label>
									<textarea class="text-input textarea wysiwyg" id="textarea" name="textfield" cols="79" rows="15"></textarea>
								</p>
								
								<p>
									<input class="button" type="submit" value="Submit" />
								</p>
								
							</fieldset>
							
							<div class="clear"></div><!-- End .clear -->
							
						</form>
						
					</div> <!-- End #tab2 -->        
					
				</div> <!-- End .content-box-content -->
				
			</div> <!-- End .content-box -->
			
		
			
			
			<div class="clear"></div>
			
			
			
			
			<div id="footer">
				<small> <!-- Remove this notice or replace it with whatever you want -->
						&#169; Copyright 2012 Youku.com  <a href="#">Top</a>
				</small>
			</div><!-- End #footer -->
			
		</div> <!-- End #main-content -->
	</div></body>
</html>
